<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-支付订单</title>
 <link rel="shortcut icon" href="images/logo.png">
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/main.css">
 <link rel="stylesheet" href="css/order.css">
</head>
<style>
	/* 添加自定义样式 */
	.custom-select {
		background-color: #f2f2f2;
		border: none;
		padding: 6px 10px;
		border-radius: 4px;
		font-size: 14px;
		width: 500px;
	}

	.custom-select:focus {
		outline: none;
		box-shadow: 0 0 5px #999999;
	}
</style>
<body>
<div id="order">
	<!-- 头部  -->
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜</div>
			<div class="fr">
				<div class="login_info fl" v-if="onlogin">
					欢迎：<em>{{loginName}}</em>
				</div>
				<div class="login_btn fl" v-else>
					<a href="login.html">登录</a>
					<span> | </span>
					<a href="register.html">注册</a>
				</div>
				<div class="user_link fl" v-if="onlogin">
					<span> | </span>
					<a href="user_center_info.html">用户中心</a>
					<span> | </span>
					<a href="cart.html">我的购物车</a>
					<span> | </span>
					<a href="user_center_order.html">我的订单</a>
					<span>|</span>
					<a href="" @click.prevent="logout()">退出登录</a>
				</div>
			</div>
		</div>
	</div>
    
    <!-- 搜素框 -->
    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
        <div class="search_con fl">
            <input type="text" placeholder="搜素商品" name="" class="input_text fl">
            <input type="button" value="搜索" class="input_btn fr">
        </div>
    </div>
     
    <!-- 收货地址 -->
    <h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<dd>
				<select class="custom-select" v-model="selectedAddress">
					<option value="" disabled selected>----------------------------请选择收货地址--------------------------</option>
					<option v-for="add in address" :value="add">
						{{ add.province }}  {{ add.city }}  {{ add.area }} {{ add.addr }}
						({{ add.name }}收) {{ maskPhoneNumber(add.tel) }}
					</option>
				</select>
			</dd>
		</dl>
		<a href="user_center_site.html" class="edit_site">编辑收货地址</a>
	</div>
    
   	<!-- 支付方式 -->	
    <h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" name="pay_style" checked>
			<label class="cash">货到付款</label>
			<input type="radio" name="pay_style">
			<label class="weixin">微信支付</label>
			<input type="radio" name="pay_style">
			<label class="zhifubao"></label>
			<input type="radio" name="pay_style">
			<label class="bank">银行卡支付</label>
		</div>
	</div>
    
   	<!-- 商品列表 -->
    <h3 class="common_title">商品列表</h3>
	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>
		<ul class="goods_list_td clearfix" v-for="(good,index) in goods">
			<li class="col01">{{index+1}}</li>
			<li class="col02"><img :src="'./'+good.pics"></li>
			<li class="col03">{{good.gname}}</li>
			<li class="col04">{{good.weight}}</li>
			<li class="col05">{{good.price}}元</li>
			<li class="col06">{{good.num}}</li>
			<li class="col07">{{good.num*good.price}}元</li>
		</ul>
	</div>
     
    <!-- 金额结算 -->	
    <h3 class="common_title">总金额结算</h3>
	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em>{{goodsCount}}</em>件商品，总金额<b>{{totalPrice}}元</b></div>
			<div class="transit">运费：<b>{{freight}}元</b></div>
			<div class="total_pay">实付款：<b>{{pay}}元</b></div>
		</div>
	</div>
	<div class="order_submit clearfix">
		<a href="javascript:;" id="order_btn">提交订单</a>
	</div>	
    
    <div class="popup_con">
		<div class="popup">
			<p>订单提交成功！</p>
		</div>
		
		<div class="mask"></div>
	</div>
</div>
    <!-- 版权所有 -->
	<div class="footer">
    	<div class="foot_link">
    		<a href="#">关于我们</a> <span> | </span>
            <a href="#">联系我么</a> <span> | </span>
            <a href="#">招聘人才</a> <span> | </span>
            <a href="#">友情链接</a> 
    	</div>
    	<p>CcpyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
        <p>电话：0734-8355998 湘ICP备16015987号</p>
    </div>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/qs.js"></script>
    <script>
		Vue.prototype.axios = axios;
		axios.interceptors.request.use(config => {
					const token = localStorage.getItem('token');
					if (token) {
						config.headers.Authorization = token;
					} else {
						config.headers.Authorization = '';
					}
					console.log(token);
					console.log(config);
					return config;
				}, error => {
					return Promise.reject(error);
				}
		);
		axios.defaults.headers.post['Content-Type'] = 'application/json';
		let begin ="http://localhost:20001/";
		let security = "freshgood-security/";
		let goods = "freshgood-goods/";
		let cart = "freshgood-cart/";
		let order = "freshgood-order/";
		let app = new Vue({
			el: "#order",
			data: {
				onlogin: false,
				outlogin: true,
				loginName: '匿名',
				ono:'',
				mno:'',
				types: {},
				goods: {},
				carts: {},
				goodsCount: 0,
				totalPrice: 0,
				freight: 10,
				pay: 0,
				address: [],
				selectedAddress:'',
			},
			created(){
				const selectedGoodsData = localStorage.getItem('selectedGoods');
				if (selectedGoodsData) {
					this.goods = JSON.parse(selectedGoodsData);
					// console.log(this.goods);
					// 渲染数据到页面上
				}
			},
			mounted: function () {
				//记载页面时，发送请求检查用户是否登录请求
				axios.all([checkLogin()])
						.then(axios.spread((rs1)=>{
							if(rs1.data.code === 0){
								//说明未登录
								this.onlogin = false;
								this.outlogin = true;
								alert("请先登录！");
								location.href="login.html";
							}else{
								this.loginName = rs1.data.user.nickName;
								this.carts = rs1.data.cartList;
								this.mno=rs1.data.user.mno;
								this.address = rs1.data.address;
								for (let i = 0; i < this.goods.length; i++) {
									this.goodsCount += this.goods[i].num;
									this.totalPrice += this.goods[i].num*this.goods[i].price;
								}
								this.pay = this.totalPrice +this.freight;
								this.onlogin = true;
								this.outlogin = false;
							}
						}));
			},
			methods: {
				logout: function () {
					axios(loginOut()).then(
							this.onlogin = false,
							this.outlogin = true,
					)
					location.href="login.html";
				},
				maskPhoneNumber(phoneNumber) {
					// 隐藏电话号码中间六位数字
					return phoneNumber.replace(/(\d{3})\d{6}(\d{2})/, '$1******$2');
				}
			},
		});

		function update() {
			let ono = localStorage.getItem("ono");
			// let ano = JSON.stringify(data.selectedAddress.ano);
			let ano = data.selectedAddress.ano;
			axios({
				url: begin+security+"member/updateOrder",
				method: "get",
				params: {
					ono: ono,
					ano: ano,
				}
			})
		}
		function loginOut() {
			return axios.get(begin+security+"security/freshgood/loginOut");

		}

		//检查用户是否登录
		function checkLogin() {
			return axios.get(begin+security+"security/freshgood/loginCheck");

		}
		function getOrderitem() {
			let items='';
			for(let i =0;i<data.goods.length;i++){
				items+=data.goods[i].gname+"*"+data.goods[i].num+",";
			}
			return items;
		}

		const data= app.$data;
		$('#order_btn').click(function() {
			if(data.goods.length>0){
				if(data.selectedAddress.length===0){
					alert("请选择地址！");
					return;
				}
				sessionStorage.setItem('orderitem',getOrderitem());
				sessionStorage.setItem('orderPrice',data.totalPrice);
				let ono = localStorage.getItem("ono");
				// console.log("price："+data.totalPrice);
				// console.log("goods: "+JSON.stringify(data.goods)
				// 		+"   选中地址： "+JSON.stringify(data.selectedAddress));
				// console.log("跳转支付界面")
				update();//更新订单支付状态
				localStorage.removeItem('selectedGoods');//移除原本存的数据
				$('.popup_con').fadeIn('fast', function() {
					setTimeout(function(){
						$('.popup_con').fadeOut('fast',function(){
							const url = begin + order + "alipay/pay" +
									"?totalAmount=" + app.$data.pay +
									"&subject=天天生鲜支付" +
									"&traceNo=" + ono;
							window.location.href = url;
							//location.href="user_center_order.html";
						});
					},2000)
				});
			}else{
				alert("您还没有购买任何商品");
				return ;
			}
		});
 	</script>
</body>
</html>
